import { useRef, useState, useEffect } from 'react'
import { Input as AnInput } from 'antd'
import { FormOutlined, EnterOutlined } from '@ant-design/icons'
import styles from './index.module.less'

const InputEdit = ({ disabled, ...attrs }) => {
  const InputRef = useRef()
  const [text, setText] = useState('')
  const [edit, setEdit] = useState(false)
  const onEdit = () => {
    setEdit(true)
  }
  const onBlur = () => {
    if (!InputRef.current.input.value) return
    setEdit(false)
  }
  useEffect(() => {
    edit && InputRef.current.focus()
  }, [edit])
  useEffect(() => {
    setText(InputRef?.current?.input?.value)
  }, [InputRef?.current?.input?.value])
  return (
    <div className={styles['input-edit-container']}>
      <AnInput
        ref={InputRef}
        // bordered={edit}
        disabled={!edit}
        suffix={<EnterOutlined />}
        onBlur={onBlur}
        onPressEnter={onBlur}
        {...attrs}
      />
      <span style={{ display: edit ? 'none' : 'inline-block', color: 'var(--xdrsec-primary-color)' }}>
        {text} {!disabled && <FormOutlined onClick={onEdit}  />}
      </span>
    </div>
  )
}

export default InputEdit
